<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
		<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
	<style type="text/css">
	.layui-form-label{
	    width:auto;
	}	
	
	</style>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form">
	<div class="layui-form-item">	
	          <div class="layui-inline">
					<label class="layui-form-label">月份</label>
					<div class="layui-input-inline">
						  <input class="layui-input" placeholder="月份" name="ATTEND_DATE" autocomplete="off" id="ATTEND_DATE">
				   </div>
		    </div>	
	
			<div class="layui-inline">
					<label class="layui-form-label">部門</label>
					<div class="layui-input-inline">
						<select  id="DepartmentId" name = "DepartmentId" > 
																		
						</select></div>
				</div>	
				<div class="layui-inline">
					<div class="layui-input-inline"style="width:auto">
						<button class="layui-btn" lay-submit="" lay-filter="search">
							<i class="layui-icon">&#xe615;</i>
						</button>
					</div>
				</div>	
				<div class="layui-inline">
					<div class="layui-input-inline" style="width:auto">
						<button class="layui-btn" lay-submit="" lay-filter="download">
							<i class="layui-icon">&#xe601;</i>
						</button>
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline"style="width:auto">
						<div  class="layui-btn"  id="upload" lay-filter="upload">
							<i class="layui-icon">&#xe67c;</i>
						</div>
					</div>
				</div>
			</div>	
	</form>
	 <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
    var _Servlet = "AttendancdDaysServlet";    
    
	layui.use(["element", "form","jquery","table", "laydate",  "okLayer", "okUtils", "upload"], function () {
		let form = layui.form;		
		let okLayer = layui.okLayer;
		let laydate = layui.laydate;
		let okUtils = layui.okUtils;
		let table = layui.table;		
		let $ = layui.jquery;
		let upload = layui.upload;
		
		okLoading.close();
		laydate.render({
            elem: '#ATTEND_DATE',
            type: "month",
            value: '2021-06'
        });
		
		okUtils.ajax("DepartmentServlet?method=getDepartmentSelect", "get", null, true).done(function (response) {
			var data = response.data;
			 var txtconent = "<option value=''>请选择</option>";
			  for(var i = 0; i < data.length; i ++){
				  txtconent = txtconent + "<option value='"+data[i].DepartmentId+"'>"+data[i].FullName+"</option>"
			  }
			  $("#DepartmentId").html(txtconent);
			   form.render();
		 }).fail(function (error) {
				console.log(error)
		 });
		
		var  searchcondition =JSON.stringify({ATTEND_DATE:'2021-06'});
		let stable = table.render({
			elem: '#tableId',
			url: "../../"+_Servlet +"?method=getList",	
			toolbar: true,
			defaultToolbar: false,
			size: "sm",
			page:false,
			limit:100,	
			toolbar: "#toolbarTpl",
			where: {searchcondition: searchcondition},
			cols: [[			
			    {title: "序號", type :"numbers", width: 50},				  
				{field: "Account", title: "账号", width: 120},
				{field: "RealName", title: "姓名", width: 120},				
				{field: "S1", title: "01", width: 100},
				{field: "S2", title: "02", width: 100},
				{field: "S3", title: "03", width: 100},
				{field: "S4", title: "04", width: 100},
				{field: "S5", title: "05", width: 100},
				{field: "S6", title: "06", width: 100},
				{field: "S7", title: "07", width: 100},
				{field: "S8", title: "08", width: 100},
				{field: "S9", title: "09", width: 100},
				{field: "S10", title: "10", width: 100},
				{field: "S11", title: "11", width: 100},
				{field: "S12", title: "12", width: 100},
				{field: "S13", title: "13", width: 100},
				{field: "S14", title: "14", width: 100},
				{field: "S15", title: "15", width: 100},
				{field: "S16", title: "16", width: 100},
				{field: "S17", title: "17", width: 100},
				{field: "S18", title: "18", width: 100},
				{field: "S19", title: "19", width: 100},
				{field: "S20", title: "20", width: 100},
				{field: "S21", title: "21", width: 100},
				{field: "S22", title: "22", width: 100},
				{field: "S23", title: "23", width: 100},
				{field: "S24", title: "24", width: 100},
				{field: "S25", title: "25", width: 100},
				{field: "S26", title: "26", width: 100},
				{field: "S27", title: "27", width: 100},
				{field: "S28", title: "28", width: 100},
				{field: "S29", title: "29", width: 100},
				{field: "S30", title: "30", width: 100},
				{field: "S31", title: "31", width: 100},	
			]],			
			done: function (res, curr, count) {
				console.info(res, curr, count);
			}
		});		
		
		form.on("submit(search)", function (data) {	  
		      var searchdata = data.field;		   
			    var  searchcondition =JSON.stringify(searchdata);
			    stable.reload({
					where: {searchcondition: searchcondition}
				
				});
				return false;
		});
		
		form.on("submit(download)", function (data) {	
		    var DepartmentId= $("#DepartmentId").val();
		      if(!DepartmentId){
		    	  okLayer.redCryMsg("请选择部門");
		    	  return false;
		      }
		    		   
			 var  searchcondition =JSON.stringify(data.field);			 
			 var strurl="../../"+_Servlet+"?method=download&searchcondition="+searchcondition+"&singtamp="+$.now();
			 window.location.href=strurl; 
		     return false;
		});
		
		var uploadInst = upload.render({
		      elem: '#upload' //绑定元素
		     ,url: "../../"+_Servlet+'?method=UPLOAD&singtamp='+$.now() //上传接口
		     ,accept:'file'		    
		     ,acceptMime:'XLS'
		     ,exts :'XLS'		  
		     ,done: function(res){
		         //上传完毕回调
		         alert(res.msg); 		        
		       }		     
		  });
		
		table.on("toolbar(tableFilter)", function (obj) {
			switch (obj.event) {
				case "add":
					add();
					break;			
			}
		});
		
		table.on("tool(tableFilter)", function (obj) {
			let data = obj.data;
			switch (obj.event) {
				case "edit":
					edit(data);
					break;
				case "del":
					del(data);
					break;
			}
		});	
		
		function add() {
			okLayer.dialogOpen({url:"form.html",callBack:function(iframeId){ 
				frames[iframeId].AcceptClick();
				  stable.reload();
				  layer.closeAll();
				}
			});
		}

		function edit(data) {			
			okLayer.dialogOpen({url:"form.html?ID="+data.ID,width:'80%',height:'80%',callBack:function(iframeId){ 
				frames[iframeId].AcceptClick();
				  stable.reload();
				  layer.closeAll();
				}
			});
		  
		}

		function del(data) {
			okLayer.confirm("SURE DELETE ?", function () {			
				okUtils.ajax(_Servlet +"?method=delete", "get", {ID: data.ID}, true).done(function (response) {
				    stable.reload();
					okUtils.tableSuccessMsg(response.msg);
				}).fail(function (error) {
					console.log(error)
				});
			})
		}
	
	
	});
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">新增</button>	
</div>
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
	<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
	<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>	
</script>

</body>
</html>
